<!-- #layout name=blank -->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Site logs</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a
        class="btn green navbar-btn"
        v-if="selected.length"
        @click="onBlameChanges"
        >Undo Changes</a
      >
      <a
        class="btn green navbar-btn"
        v-if="selected.length == 1"
        @click="onRestoreToPoint"
        >Restore to Point</a
      >
      <a
        class="btn green navbar-btn"
        v-if="selected.length == 1"
        @click="showCheckoutDialogClick"
        >Checkout a website</a
      >
      <a
        class="btn green navbar-btn"
        v-if="selected.length == 1"
        @click="exportIncrementPackage"
        >Export Changes</a
      >
      <a
        class="btn green navbar-btn"
        v-if="selected.length == 1"
        @click="exportItem"
        >Export Item</a
      >
      <a
        class="btn green navbar-btn"
        v-if="selected.length > 1"
        @click="exportItems"
        >Export Items</a
      >
    </div>
  </div>

  <kb-table :data="tableData" :show-select="true" :selected.sync="selected">
    <kb-table-column :label="Kooboo.text.site.siteLog.logItem">
      <template v-slot="row">
        <a :href="row.name.url" style="cursor: pointer" @click.stop>{{
          row.name.text
        }}</a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.siteLog.type">
      <template v-slot="row">
        <span :class="['label', row.type.class]">{{ row.type.text }}</span>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.siteLog.action">
      <template v-slot="row">
        <span :class="['label', row.action.class]">{{ row.action.text }}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.user"
      prop="user"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.lastModified"
      prop="date"
    ></kb-table-column>
    <kb-table-column head-class="table-action">
      <template v-slot="row">
        <a
          :title="row.viewVersion.title"
          :href="row.viewVersion.url"
          :target="row.viewVersion.newWindow ? '_blank' : null"
          :class="['btn btn-xs', row.viewVersion.class || 'blue' ]"
          @click.stop
        >
          <i :class="['fa', row.viewVersion.iconClass]"></i>
        </a>
      </template>
    </kb-table-column>
  </kb-table>

  <kb-pager
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="getList"
  ></kb-pager>
  <div
    v-kb-modal="showCheckoutDialog"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" @click="checkoutDialogReset"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Checkout site</h4>
        </div>
        <div class="modal-body">
          <kb-form
            :model="checkoutForm"
            :rules="checkoutRules"
            ref="checkoutForm"
          >
            <div class="form-group" id="site-name-container">
              <label class="control-label col-md-3">Name</label>
              <div class="col-md-9">
                <div class="form-inline">
                  <kb-form-item prop="siteName">
                    <input
                      class="input-medium form-control"
                      type="text"
                      v-model="checkoutForm.siteName"
                      placeholder="Site name"
                    />
                  </kb-form-item>
                </div>
              </div>
            </div>
            <div class="form-group" id="sub-domain-container">
              <label class="col-md-3 control-label" for="SubDomain"
                >domain</label
              >
              <div class="col-md-9">
                <div class="form-inline">
                  <kb-form-item prop="subDomain">
                    <input
                      class="input-medium form-control"
                      type="text"
                      v-model="checkoutForm.subDomain"
                      placeholder="Site name"
                    />
                  </kb-form-item>
                  <kb-form-item prop="rootDomain">
                    <select
                      class="form-control"
                      v-model="checkoutForm.rootDomain"
                    >
                      <option
                        v-for="$data in domains"
                        :value="$data.domainName"
                        >{{ "." + $data.domainName }}</option
                      >
                    </select>
                  </kb-form-item>
                  <span class="help-block"
                    >give your site a domain that other people can access.</span
                  >
                </div>
              </div>
            </div>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" type="submit" @click="checkoutDialogSubmit"
            >Checkout</button
          >
          <button class="btn gray" @click="checkoutDialogReset">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script src="/_Admin/View/System/SiteLogs.js"></script>
